<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>表格操作</title>

</head>

<body>

  <body>
    姓名：<input id="name" type="text" />
    年龄：<input id=age type="text" />
    <input id="btn1" type="button" value="添加" />
    <br><br>
    搜索：<input id="select" type="text" /><input id="btn2" type="button" value="搜索" />
    <br><br>
    <table id="tab1" border="2" width="500px">
      <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Blue</td>
          <td>27</td>
          <td>删除</td>
        </tr>
        <tr>
          <td>2</td>
          <td> 张三 </td>
          <td>23</td>
          <td>删除</td>
        </tr>
        <tr>
          <td>3</td>
          <td> 李四 </td>
          <td>28</td>
          <td>删除</td>
      </tbody>
    </table>

    <script>
      let tab1 = document.getElementById("tab1")
      let name = document.getElementById("name")
      let age = document.getElementById("age")
      let btn1 = document.getElementById("btn1")
      let btn2 = document.getElementById("btn2")

      let oldColor = ""
      for (let i = 0; i < tab1.tBodies[0].rows.length; i++) {
        //鼠标移入变色
        tab1.tBodies[0].rows[i].onmouseover = function () {
          oldColor = this.style.background
          this.style.background = "green"
        }
        tab1.tBodies[0].rows[i].onmouseout = function () {
          this.style.background = oldColor
        }
        //隔行变色
        if (i % 2) {
          tab1.tBodies[0].rows[i].style.background = ""
        } else {
          tab1.tBodies[0].rows[i].style.background = "#ccc"
        }
      }

      //增加数据
      btn1.onclick = function () {
        let tr, td
        tr = document.createElement("tr")

        td = document.createElement("td")
        console.log(td);

        td.innerHTML = tab1.tBodies[0].rows.length + 1
        tr.appendChild(td)

        td = document.createElement("td")
        td.innerHTML = name.value
        tr.appendChild(td)

        td = document.createElement("td")
        td.innerHTML = age.value
        tr.appendChild(td)

        td = document.createElement("td")
        td.innerHTML = "<a href='#'>删除</a>"
        tr.appendChild(td)

        //删除按钮
        td.getElementsByTagName("a")[0].onclick = function () {
          tab1.tBodies[0].removeChild(this.parentNode.parentNode)
        }

        tab1.tBodies[0].appendChild(tr)
      }
      //搜索数据
      btn2.onclick = function () {
        console.log(select.value);

        for (let i = 0; i < tab1.tBodies[0].rows.length; i++) {
          let str1 = tab1.tBodies[0].rows[i].cells[1].innerHTML
          let str2 = select.value
          if (!str1.indexOf(str2)) {
            tab1.tBodies[0].rows[i].style.background = "yellow"
          } else {
            tab1.tBodies[0].rows[i].style.background = ""
          }
        }
      }














    </script>

  </body>

</html>